<template>
	<view class="list">
		<view class="item" v-for="info in sinupInfos">
			<view class="course">
				<view class="lable">课程名称:</view>
				<view class="name">{{ info.course_name }}</view>
			</view>
			<view class="infos">
				<view class="info-title">家长报名信息：</view>
				<view class="infobk">
					<!-- <view v-if="info.students.length==0" class="" style="color: red;text-align: center;" @click="add_collectioncode(info.store_id,info.order_id)">补充学员信息</view> -->
					<view v-if="info.students.length==0" class="" style="color: red;text-align: center;" @click="openAddPop(info)">补充学员信息</view>
					<view class="info" v-for="(student,index) in info.students" >
						<view class="info-student" >学员{{ index+1 }}</view>
						<view style="position: absolute;left: 150rpx;">
							<image style="width: 50rpx;border-radius: 50%;vertical-align: middle;margin-right: 20rpx;" mode="widthFix" :src="kh_customer.avatar"></image>
							<text>{{kh_customer.nickname}}</text>
						</view>
						<view class="info-items">
							<view class="info-item" v-for="fields in student">
								<view class="field_name">{{ fields.custom_field_name }}:</view>
								<view class="field_value">{{ fields.custom_field_value }}</view>
							</view>
						</view>
						<view v-if="student.length>0" style="position: absolute; color: #FF664F;text-align: center;font-size: initial; height: 100%;right: 40upx;"
						 @click="getFormMsg(student)">修改学员信息</view>
					</view>
					<view v-if="order_info.buy_method==4" class="money">
						付款金额：
						<view style="color: #d40000;" v-if="order_info.pay_status == 1">￥{{order_info.actual_total}}</view>
						<view class="code-share-patriarch" @click="toSubmitSuccess()" v-else-if="order_info.type == 1">老师代支付</view>
					</view>
				</view>
			</view>
			
			<view class="" style="font-size: 24upx; color: rgba(0,0,0,0.65); margin-left: 20upx;">
				<view class="" style="margin-bottom: 16upx;">下单时间：{{ order_info.date_added }}</view>
				<view class="">支付时间：{{ order_info.date_modified }}</view>
				<view class="electronic-receipt" @click="setReceipt">电子发收据</view>
			</view>
			
		</view>
		<view class="item">
			<view class="remarks">
				<view class="">
					招生老师备注：
				</view>
				<textarea v-model="order_info.remark" placeholder="请输入家长备注信息" />
				</view>
			<button type="default" style="background: coral;color: white;" class="btn" @click="update_remark(store_id)">
				保存备注
			</button>
		</view>
		<button type="default" style="background: coral;color: white;width: 600rpx;border-radius: 100rpx;" class="btn" @click="comeback">
			返回
		</button>
		
		<uni-popup ref="editStudentMsg" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'home/pop_icon_failure.png'" @click="popupSwitch('edit')"></image>
				<view class="popup_box_content">
					<view>
						<view style="float: left;background-color: #DEDEDE; height: 1upx; width: 100upx; margin-top: 40upx;margin-left: 30upx;border: 1upx solid #000000;"></view>
						<view style="float: left; margin-left: 20upx; margin-top: 10upx;">补充学员信息</view>
						<view style="float: left;background-color: #DEDEDE; height: 1upx; width: 100upx; margin-top: 40upx;margin-left: 30upx;border: 1upx solid #000000;"></view>
					</view>
					<view style="margin-top: 80upx;">
						<view class="popup_msg" v-for="(item,index) in formMsg" :key="index">
							<text>{{item.name}}</text>
							<!-- #ifdef MP-WEIXIN -->
								<input type="text" v-model="item.custom_field_value" :placeholder="item.placeholder"/>
							<!-- #endif -->
							<!-- #ifdef H5 -->
								<input type="text" v-model="item.custom_field_value" :placeholder="item.placeholder"/>
							<!-- #endif -->
						</view>
					</view>
					<view class="edit_btn" @click="sureEdit">
						确认补充
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="addStudentMsg" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'home/pop_icon_failure.png'" @click="closeAddPop()"></image>
				<view class="popup_box_content">
					<view class="popup_msg" v-for="item in formMsg">
						<text>{{item.name}}</text>
						<input type="text" v-model="item.custom_field_value" :placeholder="item.placeholder"/>
					</view>
					<!-- <view class="popup_msg">
						<text>手机号</text>
						<input type="text" :value="student_telephone" placeholder="请输入手机号"/>
					</view>
					<view class="popup_msg">
						<text>孩子年龄</text>
						<input type="text" :value="student_age" placeholder="请输入孩子年龄"/>
					</view> -->
					<view class="edit_btn" @click="sureAdd()">
						确认添加
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- <uni-popup ref="additionalinformation" :custom="true">
			<image class="popup_box_close_t" :src="imglink + 'home/pop_icon_failure.png'" @click="popupSwitch('edit')"></image>
			<supplement>
			</supplement>
		</uni-popup> -->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import supplement from '@/pages/memberCenter/collectioncode/collectioncode/supplement.vue'
	export default{
		data(){
			return {
				kh_customer:{
					avatar:'',
					nickname:''
				},
				imglink: this.$store.state.imgLink,
				sinupInfos:[],
				store_id:0,
				order_id:0,
				page:1,
				formMsg:[],
				page_size:12,
				order_info:[],
				addParams : {
					token:null,
					activity_id:null,
					order_id:null,
					customer_telephone:null,
					course:null,
					activity_course_id:null,
					order_activity_course_id:null
				},
				activity_course_info:null,
				students:[]
			}
		},
		// inject: ['reload'],
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',options)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			// let pages = getCurrentPages()
			// let currentPge = pages[0].$route.fullPath
			if(options.token){
				this.token = options.token
				uni.setStorageSync('token', options.token);
				this.$store.commit('updateToken',options.token)
			}
			if (!this.$store.getters.getToken) {
				location.href = this.$store.state.URL + '/customer/user/wx_login?page=/pages/memberCenter/personPerformance/signupInfo?store_id='+options.store_id+'&order_id='+options.order_id;
			}
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			
			this.order_id = options.order_id
			this.getOrderSignupInfos();
			this.get_order_detail()
		},
		methods:{
			toSubmitSuccess(){
				uni.navigateTo({
					//pages/memberCenter/collectioncode/collectioncode/newregistration?activity_id=&customer_id=&store_id=
					url:'../collectioncode/collectioncode/daifu_newregistration?token='+this.$store.getters.getToken+'&orderid='+this.order_id
				})
			},
			changeVal(e){
				this.setData({
					val: e.detail.value
				})
			},
			// 电子收据
			setReceipt(){
				console.log("setReceipt",this.order_info)
				if(this.order_info.pay_status == 0){
					uni.showToast({
						title:"请先支付订单",
						icon:'none',
						duration:2000
					})
					return false
				}
				
				let data = {
					token:this.$store.getters.getToken,
					order_id:this.order_info.order_id,
					nickname: this.order_info.customer_name,
					phone: this.order_info.customer_telephone,
					activity_detail: this.order_info.remark||'无',
					teach_name:this.order_info.activity.customer_name,
					// remark:,
					// token:this.$store.getters.getToken,
					// order_id:2,
					// nickname: 1,
					// phone: this.order_info.customer_telephone,
					// activity_detail: this.sinupInfos[0].course_name,
					// teach_name:1,
				}
				console.log(this.order_info,"==========================");
				// 3.发送请求
				this.$api.set_receipt(data).then(res => {
					console.log(this.order_info.order_id,"666")
					if(res.status){
						uni.navigateTo({
							url:"/pages/memberCenter/orderManage/receiptForCollection?topNavActiveIndex=0&order_id=" + this.order_info.order_id
						})
					}else{
						uni.navigateTo({
							url:"/pages/memberCenter/orderManage/receiptForCollection?topNavActiveIndex=0&order_id=" + this.order_info.order_id
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			sureEdit(){
				let data = {
					token:this.$store.getters.getToken,
					formMsg:JSON.stringify(this.formMsg)
				}
				console.log(data,"修改");
				this.$api.order_course_child_msg_edit(data).then(res => {
					console.log(res)
					if(res.status){
						uni.showToast({
							title:'修改成功',
							icon:'none',
							duration:2000
						})
						setTimeout(()=> {
							this.$refs.editStudentMsg.close()
							this.getOrderSignupInfos();
							this.$router.go(0)
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(er => {
					console.log(er)
				})
			},
			getOrderSignupInfos(){
				
				const data = {
					token:this.token,
					order_id:this.order_id
					// token:'CfqidFAtUSL0euMs1ymh5fb8bd7198968',
					// order_id:1
				};
				this.$api.get_order_custom_info(data).then(res => {
					console.log(res,'订单报名信息')
					if(res.status){
						this.sinupInfos = res.list
						console.log(this.sinupInfos,"this.sinupInfos+++++++++++++++++++++++++++++++++");
						// this.sinupInfos.forEach((item) => {
						// 	if(  ){
						// 		this.students.concat()
						// 	}
						// })
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					
					uni.showToast({
						title:err,
						icon:'none',
						duration:2000
					})
				})
			},popupSwitch(flag){
				if(flag == 'edit'){
					this.$refs.editStudentMsg.close()
					this.$refs.additionalinformation.close()
				}else{
					this.$refs.contactPopup.close()
				}
			},
			getFormMsg(order_custom_info){
				console.log("getFormMsg(order_custom_info)",order_custom_info)
				let ids=[]
				order_custom_info.forEach((info,index)=>{
					ids.push(info.order_custom_info_id)
				})
				let data = {
					token:this.$store.getters.getToken,
					ids:JSON.stringify(ids),
				}
				let that = this
				this.$api.gain_course_form_msg(data).then(res => {
					console.log(res)
					if(res.status){
						this.formMsg = res.res
						this.formMsg.forEach(item => {
							item.placeholder = '请输入' + item.name
						})
						this.$refs.editStudentMsg.open()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取活动表单字段
			
			add_collectioncode(store_id,order_id){
				this.$refs.additionalinformation.open()
			},
			get_order_detail(){
				let data={
					token:this.$store.getters.getToken,
					order_id:this.order_id
					// token:this.$store.getters.getToken,
					// order_id:1
				}
				this.$api.gain_order_act_detail(data).then(res => {
					console.log("订单信息",res)
					this.order_info=res.data
					this.kh_customer=res.data.kh_customer
					console.log("iiu",this.kh_customer);
					this.activity_course_info = res.data.activity_courses
					this.getActivityForMsg(this.order_info.activity_id)
				})
			},
			update_remark(store_id){
				let data={
					token:this.$store.getters.getToken,
					order_id:this.order_id,
					remark:this.order_info.remark,
				}
				this.$api.update_order_remark(data).then(res=>{ 
					uni.showToast({
						title:'修改成功',
						icon:'none',
						duration:2000
					})
					this.$router.go(0)
					
				})
				// uni.navigateTo({
				// 	url: '/pages/memberCenter/personPerformance/personPerformance?store_id='+store_id
				// });
			},
			// 获取表单信息
			getOrderMsg(){
				let params = {
					token:this.$store.getters.getToken,
					activity_id:this.order_info.activity_id
					// token:this.$store.getters.getToken,
					// activity_id:1
				}
				this.$api.together_order_msg(params).then(res => {
					console.log(res,'MMMMMMMMMMMMSSSSSSGGGGGGGGGGGG');
				})
			},
			// 返回
			comeback() {
				uni.navigateTo({
					url: '/pages/memberCenter/personPerformance/personPerformance?store_id='+this.store_id
				});
			    // 这里可以自定义返回逻辑，比如下面跳转其他页面
				// uni.navigateBack({
				// 		delta: 1
				// });
			    return true //表示禁止默认返回
			},
			
			
			// 获取活动表单信息
			getActivityForMsg(activity_id){
				let params = {
					token:this.$store.getters.getToken,
					activity_id:activity_id
					// token:this.$store.getters.getToken,
					// activity_id:1
				}
				this.$api.together_order_msg(params).then(res =>{
					if(res.status){
						this.formMsg = []
						let data = res.res
						data.forEach(item => {
							let params  = {
								custom_field_id:item.name.field_id,
								value:'',
								name:{
									field_id:item.name.field_id,
									name:item.name.name,
									require:item.name.require,
									statue:item.name.status
								},
								placeholder:'请输入'+item.name.name
							}
							this.formMsg.push(params)
						})
						console.log(this.formMsg,"FFFFFFFFFFMMMMMMMMMMMMMMMM");
					}
				})
			},
			sureAdd(){
				// let params = {
				// 	token:this.$store.getters.getToken,
				// 	activity_id:this.sinupInfos[0].activity_id,
				// 	order_id:this.sinupInfos[0].order_id,
				// 	activity_course_id:this.sinupInfos[0].activity_course_id,
				// 	order_activity_course_id:this.sinupInfos[0].activity_course_id,
				// 	forms:
				// }
				this.addParams.course = [{
					activity_id:this.addParams.activity_id,
					activity_course_id:this.addParams.activity_course_id,
					order_activity_course_id:this.addParams.order_activity_course_id,
					forms:[{
						chooseAddreId:0,
						form_field:this.formMsg
					}]
				}]
				console.log(this.addParams,'AAAAAAAAPPPPPPPPPP');
				this.addParams.course = JSON.stringify(this.addParams.course)
				
				this.$api.course_user_msg(this.addParams).then(res => {
					if(res.status){
						uni.showToast({
							icon:'none',
							title:'添加成功'
						})
						setTimeout(()=> {
							this.$refs.addStudentMsg.close()
							this.getOrderSignupInfos();
						},1000)
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
						setTimeout(()=> {
							this.$refs.addStudentMsg.close()
							this.getOrderSignupInfos();
						},1000)
					}
				})
			},
			openAddPop(item){
				console.log(item,'IIIIIIITTTTTT');
				this.addParams.token = this.$store.getters.getToken,
				this.addParams.activity_id = item.activity_id,
				this.addParams.order_id = item.order_id,
				this.addParams.customer_telephone = this.order_info.customer_telephone,
				this.addParams.activity_course_id = item.activity_course_id,
				this.addParams.order_activity_course_id = this.activity_course_info.filter(data => data.name = item.name)[0].order_activity_course_id
				
				this.$refs.addStudentMsg.open()
			},
			closeAddPop(){
				this.$refs.addStudentMsg.close()
			}
			
		},
		components:{
			uniPopup,
			supplement
		},
		
	}
</script>

<style>
	page{
		background: #F3F3F4;
	}
	.list{
		
	}
	.item{
		background-color: #FFFFFF;
		padding-bottom: 100upx;
	}
	.item .course{
		margin: 0 20upx;
		display: flex;
		justify-content: start;
		align-items: center;
		height:72upx;
		line-height: 72upx;
		border-bottom: 2upx solid #ccc;
		padding:20upx 0;
	}
	.item .course .lable{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		font-size: 28upx;
		padding-right: 10upx;
		color: #999999;
		text-align: center;
		line-height: 70upx;
	}
	.item .course .name{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		font-size: 40upx;
		color: #333333;
		font-weight: 900;
	}
	.item .infos{
		padding:20upx;
		margin-bottom: 10upx;
		background-color: #FFFFFF;
		
	}
	.item .infos .info-title{
		color: #999999;
		font-size: 30upx;
		margin: 10upx 0;
		font-weight: 500;
	}
	.item .infos .info{
		display: flex;
		justify-content: start;
		border-bottom: 3upx solid #DDDDDD;
		margin: 20upx 0;
		flex-wrap: wrap;
	}
	.item .infos .money{
		display: flex;
		font-size: 28upx;
		margin-left: 40upx;
		justify-content: start;
		margin-bottom: 20upx;
		margin-top: 10upx;
	}
	.item .infos .info .info-student{
		font-size: 28upx;
		padding-right: 20upx;
		color:#FFFFFF;
		background: #F97256;
		height: 100%;
		padding: 10upx 20upx;
		border-radius: 0upx 45upx 45upx 0upx;
	}
	.item .infos .info .info-items{
		margin-top: 50upx;
	}
	.item .infobk{
		border: 1upx solid #CCCCCC;
		border-radius: 20upx;
		background: #F7F7F7;
	}
	.item .infos .info .info-items .info-item{
		display: flex;
		justify-content: start;
		/* display: block; */
		height:48upx;
		line-height: 48upx;
		margin-top: 30upx;
		margin-left: -70upx;
	}
	.item .infos .info-items .info-item .field_name{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		font-size: 28upx;
		padding-right: 10upx;
		color: #333333;
	}
	.item .infos .info-items .info-item .field_value{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		font-size: 30upx;
		color: #333333;
	}
	.item .remarks{
		
	}
	.item .remarks view{
		font-size: 28upx;
		margin-left: 20upx;
		text-indent: 20upx;
		margin-bottom: 30upx;
		border-left: 8upx solid #e30000;
	}
	.item .remarks textarea{
		margin-left: 20upx;
		height: 150upx;
		padding: 20upx;
		font-size: 26upx;
		width: 670upx;
		border: 1upx solid #DEDEDE;
		border-radius: 20upx;
		background: #F7F7F7;
	}
	.item .btn{
		height: 70upx;
		width: 500upx;
		font-size: 28upx;
		background-color: #ffffff;
		margin-top: 80upx;
		border-radius: 50upx;
		border: 1upx solid #DEDEDE;
	}
	
	.popup_box_de{
		height: 924upx;
		width: 600upx;
		position: relative;
		margin-top: -50upx;
	}
	.popup_box_close{
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_close_t{
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: -555upx;
		margin-left: 250upx;
		z-index: 9;
	}
	.popup_box_content{
		width: 100%;
		/* height: 662upx; */
		background: #FFFFFF;
		position: absolute;
		top: 72upx;left: 0;
		border-radius: 16upx;
		z-index: 999;
		padding: 0 30upx;
		padding-top: 20upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
	}
	.popup_msg{
		width: 100%;
		display: flex;
		height: 80upx;
		background: #F5F5F5;
		border-radius: 4upx;
		margin-bottom: 30upx;
		margin-top: 30upx;
	}
	.popup_msg>text{
		text-align: center;
		display: inline-block;
		width: 30%;
		line-height: 80upx;
		background: #ECECEC;
		font-size: 26upx;
		color: #333;
	}
	.popup_msg>input{
		padding:0 20upx;
		height: 80upx;
		box-sizing: border-box;
		font-size: 28upx;
	}
	.edit_btn{
		width: 500upx;
		height: 100upx;
		border-radius: 44upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		 text-align: center;
		 color: #FFFFFF;
		 font-size: 32upx;
		 line-height: 100upx;
		 margin: 0 auto;
		 margin-top: 40upx;
	}
	.electronic-receipt{
		position: absolute;
		right: 20upx;
		margin-top: -70upx;
		width: 228upx;
		height: 56upx;
		line-height: 56upx;
		font-size: 28upx;
		border-radius: 35upx;
		text-align: center;
		border: 1upx solid #FF674E;
		color: #FF674E;
	}
	.code-share-patriarch{
		width: 205upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #ffffff;
		font-size: 26upx;
		background-color: coral;
		/* box-shadow: 0 4upx 12upx 0 rgba(255, 95, 63, 0.47); */
		border-radius: 30upx;
		/* display: inline-block;
		float: right; */
		position:relative;
		left: 320rpx;
	}
</style>
